<template>
  <div class="router-fixed">
  	<shop-header ref="shopHeader">	
			<h2>浏览记录</h2>	
		</shop-header>
		<div class="history-wrapper">
			<ul class="history-list">
				<router-link :to="{ path: '/goods/detail', query: { id: item._id } }" tag="li" class="history-item bottom-1px" v-for="(item,index) in browseList" :key="index">
					<div class="product-img">
						<span class="img-holder"><img class="obj-cover" :src="item.goodsCover"></span>
					</div>
					<div class="item-content">
						<h3 class="title">{{ item.goodsName }}</h3>
						<div class="bottom-flex">
							<span class="price">¥{{ item.price | toDecimal }}</span>
							<x-button @click.native.stop="deleteItem(item)" mini class="item-flat-button">删除</x-button>
						</div>
					</div>
				</router-link>
			</ul>
			<div class="clear-history" v-if="browseList.length>0">
				<six-button type="danger" size="small" @click.native="clearBrowse">
					<span>清空全部</span>
				</six-button>
			</div>
		</div>
		<!-- 无数据状态 -->
		<no-results v-if="browseList == 0"></no-results>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { XButton } from 'vux'	
import { toDecimal } from '@/utils/mUtils'
import ShopHeader from '@/components/public/ShopHeader'
import NoResults from '@/components/public/NoResults'
export default {
	components: {
		ShopHeader,
		NoResults,
		XButton
	},
  data () {
  	return {
  		
  	}
  },
  computed: {
  	...mapGetters(['browseList'])
  },
  methods: {
  	deleteItem (item) {
  		// 删除单条历史记录
  		let that = this
  		this.$vux.confirm.show({
  			title: '提示信息',
  			content: '确定要删除吗？',
  			onConfirm () {
  				that.$store.dispatch('delBrowseItem', item)
  			}
  		})
  	},
    clearBrowse () {
    	// 清楚全部历史记录
      let that = this
      this.$vux.confirm.show({
        title: '提示信息',
        content: '确定要删除全部吗？',
        onConfirm () {
          that.$store.dispatch('clearBrowse')
        }
      })
    }
  },
  filters: {
  	toDecimal (val) {
  		return toDecimal(val)
  	}
  },
  mounted () {
  	let that = this
		this.$el.onscroll = function () {
  		that.$refs.shopHeader.isShow = false
		}
  } 
}
</script>

<style scoped>
.history-wrapper {
	background: #fff;
	padding: 0 15px;
}
.history-item {
	display: flex;
	padding: 15px 0;
}
.product-img {
	flex: 0 0 62px;
	width: 62px;
	height: 62px;
}
.img-holder {
	width: 62px;
	padding-bottom: 100%;
}
.img-holder img{
	border: 1px solid #eaeaea;
}
.item-content {
	flex: 1;
	padding-left: 8px;
}
.item-content .title {
	font-size: 13px;
	color: #666;
	line-height: 18px;
	height: 36px;
	overflow: hidden;
}
.bottom-flex {
	display: flex;
	padding-top: 2px;
}
.price {
	flex: 1;
	font-size: 13px;
	color: #f76d6d;
	line-height: 24px;
}
.item-flat-button {
	flex: 0 0 auto;
	font-size: 12px;
	color: #666;
	height: 24px;
	line-height: 24px;
	min-width: 50px;
}
.clear-history {
	padding: 15px 0;
	text-align: center;
}
.clear-history button {
	color: #fff;
	width: 80%;
}
.six-button span {
	display: block;
}
</style>
